<mat-card>
  <mat-card-title>Simple lists</mat-card-title>
  <mat-card-content>
    <mat-list>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
      <mat-list-item> Paprika </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Navigation lists</mat-card-title>
  <mat-card-content>
    <mat-nav-list>
      <a mat-list-item *ngFor="let link of links"> {{ link }} </a>
    </mat-nav-list>

    <mat-nav-list>
      <mat-list-item *ngFor="let link of links">
        <a matLine>{{ link }}</a>
        <button mat-icon-button>
          <mat-icon>info</mat-icon>
        </button>
      </mat-list-item>
    </mat-nav-list>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title>Selection lists</mat-card-title>
  <mat-selection-list #shoes>
    <mat-list-option *ngFor="let shoe of typesOfShoes">
      {{shoe}}
    </mat-list-option>
  </mat-selection-list>

  <p>
    Options selected: {{shoes.selectedOptions.selected.length}}
  </p>
</mat-card>

<mat-card>
  <mat-card-title>Multi-line lists</mat-card-title>
  <mat-list>
    <mat-list-item *ngFor="let message of messages">
      <h3 matLine> {{message.from}} </h3>
      <p matLine>
        <span> {{message.subject}} </span>
        <span class="demo-2"> -- {{message.content}} </span>
      </p>
    </mat-list-item>
  </mat-list>

  <mat-list>
    <mat-list-item *ngFor="let message of messages">
      <h3 matLine> {{message.from}} </h3>
      <p matLine> {{message.subject}} </p>
      <p matLine class="demo-2"> {{message.content}} </p>
    </mat-list-item>
  </mat-list>
</mat-card>


<mat-card>
  <mat-card-title> Lists with icons</mat-card-title>
  <mat-card-content>
    <mat-list>
      <mat-list-item *ngFor="let message of messages">
        <mat-icon matListIcon>folder</mat-icon>
        <h3 matLine> {{message.from}} </h3>
        <p matLine>
          <span> {{message.subject}} </span>
          <span class="demo-2"> -- {{message.content}} </span>
        </p>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title> Lists with avatars </mat-card-title>
  <mat-card-content>
    <mat-list>
      <mat-list-item *ngFor="let message of messages">
        <img matListAvatar src="assets/images/avatars/noavatar.png" alt="assets/images/avatars/noavatar.png">
        <h3 matLine> {{message.from}} </h3>
        <p matLine>
          <span> {{message.subject}} </span>
          <span class="demo-2"> -- {{message.content}} </span>
        </p>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title> Dense lists </mat-card-title>
  <mat-card-content>
    <mat-list dense>
      <mat-list-item> Pepper </mat-list-item>
      <mat-list-item> Salt </mat-list-item>
      <mat-list-item> Paprika </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>

<mat-card>
  <mat-card-title> Lists with multiple sections </mat-card-title>
  <mat-card-content>
    <mat-list>
      <h3 matSubheader>Folders</h3>
      <mat-list-item *ngFor="let folder of folders">
        <mat-icon matListIcon>folder</mat-icon>
        <h4 matLine>{{folder.name}}</h4>
        <p matLine class="demo-2"> {{folder.updated}} </p>
      </mat-list-item>
      <mat-divider></mat-divider>
      <h3 matSubheader>Notes</h3>
      <mat-list-item *ngFor="let note of notes">
        <mat-icon matListIcon>note</mat-icon>
        <h4 matLine>{{note.name}}</h4>
        <p matLine class="demo-2"> {{note.updated}} </p>
      </mat-list-item>
    </mat-list>
  </mat-card-content>
</mat-card>